<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <canvas id="canvas" class="canvas-1"></canvas>
      <div class="user-box">
        <div class="top">
          <div class="header">
            <a href="/">
              <span class="title">{{ name }}</span>
            </a>
          </div>

        </div>

        <route-view></route-view>
      </div>

      <img src="@/assets/ft_bg.png" class="ft_bg">
      <div class="footer">
        <div class="copyright">
          <a href="" target="_blank">Copyright &copy; 2020 tip</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RouteView from "@/components/layouts/RouteView"
import { mixinDevice } from '@/utils/mixin.js'
let c = null
let canvas = null
let w = null
let h = null
let ropes = []
let nameOfVariable = "value",
  mouse = {},
  last_mouse = {},
  rl = 50,
  randl = [],
  target = { x: w / 2, y: h / 2 },
  last_target = {},
  t = 0,
  q = 10,
  da = [],
  type = "l"
class segm {
  constructor(x, y, l) {
    this.b = Math.random() * 1.9 + 0.1
    this.x0 = x
    this.y0 = y
    this.a = Math.random() * 2 * Math.PI
    this.x1 = this.x0 + l * Math.cos(this.a)
    this.y1 = this.y0 + l * Math.sin(this.a)
    this.l = l
  }
  update (x, y) {
    this.x0 = x
    this.y0 = y
    this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0)
    this.x1 = this.x0 + this.l * Math.cos(this.a)
    this.y1 = this.y0 + this.l * Math.sin(this.a)
  }
}
class rope {
  constructor(tx, ty, l, b, slq, typ) {
    if (typ == "l") {
      this.res = l / 2
    } else {
      this.res = l / slq
    }
    this.type = typ
    this.l = l
    this.segm = []
    this.segm.push(new segm(tx, ty, this.l / this.res))
    for (let i = 1; i < this.res; i++) {
      this.segm.push(
        new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res)
      )
    }
    this.b = b
  }
  update (t) {
    this.segm[0].update(t.x, t.y)
    for (let i = 1; i < this.res; i++) {
      this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1)
    }
  }
  show () {
    if (this.type == "l") {
      c.beginPath()
      for (let i = 0; i < this.segm.length; i++) {
        c.lineTo(this.segm[i].x0, this.segm[i].y0)
      }
      c.lineTo(
        this.segm[this.segm.length - 1].x1,
        this.segm[this.segm.length - 1].y1
      )
      c.strokeStyle = "#bbddff"
      c.lineWidth = this.b
      c.stroke()

      c.beginPath()
      c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI)
      c.fillStyle = "#bbddff"
      c.fill()

      c.beginPath()
      c.arc(
        this.segm[this.segm.length - 1].x1,
        this.segm[this.segm.length - 1].y1,
        2,
        0,
        2 * Math.PI
      )
      c.fillStyle = "#bbddff"
      c.fill()
    } else {
      for (let i = 0; i < this.segm.length; i++) {
        c.beginPath()
        c.arc(this.segm[i].x0, this.segm[i].y0, this.segm[i].b, 0, 2 * Math.PI)
        c.fillStyle = "#bbddff"
        c.fill()
      }
      c.beginPath()
      c.arc(
        this.segm[this.segm.length - 1].x1,
        this.segm[this.segm.length - 1].y1,
        2, 0, 2 * Math.PI
      )
      c.fillStyle = "#bbddff"
      c.fill()
    }
  }
}
export default {
  name: "UserLayout",
  components: { RouteView },
  mixins: [mixinDevice],
  data () {
    return {
      name: process.env.VUE_APP_PLATFORM_NAME,
    }
  },

  mounted () {
    document.body.classList.add('userLayout')
    let self = this
    c = self.init("canvas").c
    canvas = self.init("canvas").canvas
    w = (canvas.width = window.innerWidth - 10)
    h = (canvas.height = window.innerHeight - 10)
    ropes = []

    //variables definition


    for (let i = 0; i < 100; i++) {
      if (Math.random() > 0.25) {
        type = "l"
      } else {
        type = "o"
      }
      ropes.push(
        new rope(
          w / 2,
          h / 2,
          (Math.random() * 1 + 0.5) * 500,
          Math.random() * 0.4 + 0.1,
          Math.random() * 15 + 5,
          type
        )
      )
      randl.push(Math.random() * 2 - 1)
      da.push(0)
    }
    //mouse position
    canvas.addEventListener(
      "mousemove",
      function (e) {
        last_mouse.x = mouse.x
        last_mouse.y = mouse.y

        mouse.x = e.pageX - this.offsetLeft
        mouse.y = e.pageY - this.offsetTop
      },
      false
    )

    canvas.addEventListener("mouseleave", function (e) {
      mouse.x = false
      mouse.y = false
    })

    //window resize
    window.addEventListener("resize", function () {
      (w = canvas.width = window.innerWidth),
        (h = canvas.height = window.innerHeight)
      self.loop()
    })

    //animation runner
    self.loop()
    setInterval(self.loop, 1000 / 40)
  },
  methods: {
    draw () {

      // if (mouse.x) {
      //   target.errx = mouse.x - target.x
      //   target.erry = mouse.y - target.y
      // } else {
      target.errx =
        w / 2 +
        (h / 2 - q) *
        Math.sqrt(2) *
        Math.cos(t) /
        (Math.pow(Math.sin(t), 2) + 1) -
        target.x
      target.erry =
        h / 2 +
        (h / 2 - q) *
        Math.sqrt(2) *
        Math.cos(t) *
        Math.sin(t) /
        (Math.pow(Math.sin(t), 2) + 1) -
        target.y
      // }

      target.x += target.errx / 10
      target.y += target.erry / 10

      t += 0.01

      for (let i = 0; i < ropes.length; i++) {
        if (randl[i] > 0) {
          da[i] += (1 - randl[i]) / 10
        } else {
          da[i] += (-1 - randl[i]) / 10
        }
        ropes[i].update({
          x:
            target.x +
            randl[i] * rl * Math.cos((i * 2 * Math.PI) / ropes.length + da[i]),
          y:
            target.y +
            randl[i] * rl * Math.sin((i * 2 * Math.PI) / ropes.length + da[i])
        })
        ropes[i].show()
      }
      last_target.x = target.x
      last_target.y = target.y
    },



    //animation frame
    loop () {
      window.requestAnimFrame(this.loop)
      c.clearRect(0, 0, w, h)
      this.draw()
    },
    init (elemid) {
      let canvas = document.getElementById(elemid),
        c = canvas.getContext("2d"),
        w = (canvas.width = window.innerWidth),
        h = (canvas.height = window.innerHeight)
      c.fillStyle = "rgba(30,30,30,1)"
      c.fillRect(0, 0, w, h)
      return { c: c, canvas: canvas }
    }
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  },
}
</script>

<style lang="less" scoped>
.canvas-1 {
  position: absolute;
  top: 0;
  left: 0;
}
#userLayout.user-layout-wrapper {
  height: 100%;
  box-sizing: border-box;
  .container {
    width: 100%;
    min-height: 100%;
    background: url(~@/assets/bg_none_x1.png) no-repeat;
    box-sizing: border-box;
    background-size: cover;
    // padding: 110px 0 144px;
    // display: flex;
    position: relative;
    a {
      text-decoration: none;
    }
    .user-box {
      width: 368px;
      box-sizing: border-box;
      padding: 15px;
      position: absolute;
      top: 50%;
      margin-top: -270px;
      left: 50%;
      margin-left: -184px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 3px 6px rgba(58, 160, 238, 0.44);
      .top {
        text-align: center;
        .header {
          height: 80px;
          line-height: 80px;
          .badge {
            position: absolute;
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            margin-left: -12px;
            margin-top: -10px;
            opacity: 0.8;
          }

          .logo {
            height: 44px;
            vertical-align: top;
            margin-right: 16px;
            border-style: none;
          }

          .title {
            font-size: 24px;
            line-height: 80px;
            color: #3393ec;
            font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
              'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
              'Segoe UI Emoji', 'Segoe UI Symbol';
            font-weight: 600;
            position: relative;
            top: 2px;
          }
        }
        .desc {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          margin-top: 12px;
          margin-bottom: 40px;
        }
      }

      .main {
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
      }
    }

    .ft_bg {
      position: absolute;
      bottom: 44px;
      left: 50%;
      margin-left: -170px;
      width: 340px;
      height: 3px;
    }
    .footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: 0 16px;
      margin: 48px 0 36px;
      text-align: center;
      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
  }
}
</style>